<!--
 * @Descripttion: 预览
 * @Author: yansu
 * @Date: 2020-09-22 13:36:33
 * @LastEditors: yansu
 * @LastEditTime: 2020-11-20 12:33:29
-->
<template>
  <div class="historyWrap">
    <div v-if="nodeList.length">
      <div class="content">
        <div class="process" v-for="(item, index) in nodeList" :key="item.id">
          <div
            class="contentList"
            :class="{ publish: item.marked, current: currentIndex === index }"
            @click="selectProcess(item, index)"
            :title = 'item.title'
          >
            {{ item.title }}
            <div class="logo" v-if="item.marked">
              <i class="el-icon-check"></i>
            </div>
          </div>
          <div
            class="line"
            v-if="index !== nodeList.length - 1"
            :class="{ current: item.success }"
          >
            <span></span>
            <i></i>
          </div>
        </div>
      </div>
      <el-divider></el-divider>
      <div class="recommend" v-for="(item, index) in recommendList" :key="index">
        <div
          class="recommend_content"
          v-html="item.value"
          :class="{ currentWords: item.marked }"
          v-if="item.value"
        ></div>
        <div class="logo" v-if="item.value && item.marked">
          <i class="el-icon-check"></i>
        </div>
      </div>
    </div>
    <div v-if="nodeList.length == 0 && !loading" class="empty">
      <div class="imgWrap">
        <el-image :src="require('@/assets/img/intelligent/noMatch.png')" fit="fit">
        </el-image>
        <span>暂无金牌话术历史</span>
      </div>
    </div>
  </div>
</template>
<script>
import { deepClone } from "@/utils/m7Utils.js";
export default {
  props: {
    reload: {type: Number, default: 0},
  },
  data() {
    return {
      currentIndex: 0,
      recommendList: [],
      historyData: {},
      nodeList:[],
      loading:false,
    };
  },
  // beforeMount(){
  //   this.showHistory()
  // },
  methods: {
    showHistory() {
      this.recommendList = [];
      this.historyData = [];
      this.nodeList = []
      this.loading = true;
        let params = {
          callSheetId: this.$route.params.id,
        };
        this.$store.dispatch("getScriptFlowHistory", params).then((res) => {
          if (res.success && res.data) {
            this.historyData = res.data;
            this.$emit("history",res.data)
            let linkRelation = [];
            let node = deepClone (this.historyData.flow.talk_flow.nodeDataArray);
            let relation = deepClone(this.historyData.flow.talk_flow.linkDataArray);
            relation.forEach((item, index) => {
              linkRelation.push(item.to);
            });
            node.sort(function (a, b) {
              return linkRelation.indexOf(a.key) - linkRelation.indexOf(b.key);
            });
            this.nodeList = node.map(function (a) {
              return a;
            });
          }else{
            this.historyData = {};
            this.nodeList = []
            this.$emit('history',null)
          }
          this.loading = false
        });
    },
    selectProcess(item, index) {
      this.currentIndex = index;
      this.recommendList = this.nodeList[index].question
        ? this.nodeList[index].question
        : [];
    },
  },
};
</script>

<style lang="stylus" scoped>
.historyWrap {
  position relative
  height 100%
  .top {
    line-height: 60px;
    .btn {
      text-align: right;
      .el-button {
        line-height: 30px;
        margin: 0 15px;
        padding: 0 20px;
      }
    }
    .back {
      display: inline-block;
      height: 26px;
      width: 26px;
      border: 1px solid #4C97DB;
      border-radius: 50%;
      text-align: center;
      line-height: 26px;
      font-size: 20px;
      color: #4C97DB;
      margin-right: 10px;
      cursor: pointer;
    }
    .text {
      font-size: 14px;
      color: #979495;
    }

    .name {
      font-size: 14px;
    }
  }

  .content {
    display: flex;
    flex-wrap: wrap;
    margin: 10px 0;
    .process {
      display: flex;
      place-items: center;
      .contentList {
        height: 30px;
        line-height: 30px;
        border: 1px solid #E9EBED;
        font-size: 14px;
        padding: 0 10px;
        width 90px;
        text-align center;
        font-weight: 600;
        position: relative;
        cursor: pointer;
        border-radius: 4px;
        overflow:hidden;
        text-overflow:ellipsis;
        white-space:nowrap
        margin 5px 0
        &.publish {
          border-color: #459BEA;
          color: #459BEA;
        }

        &.current {
          background: #459BEA;
          color: white;

          .logo {
            background: white;
            color: #459BEA;
          }
        }
      }

      .line {
        height: 36px;
        width: 35px;
        display: flex;
        align-items: center;
        padding: 0 5px;
        span {
          width: 100%;
          border-top: 2px solid #9B989C;
        }

        i {
          width: 0;
          height: 0;
          border: 6px solid transparent;
          border-left-color: #9B989C;
        }
      }

      .logo {
        width: 15px;
        height: 15px;
        background: #459BEA;
        color: white;
        text-align: center;
        line-height: 15px;
        border-radius: 50%;
        position: absolute;
        bottom: 3px;
        right: 3px;
      }

      &.arrow {
        border: none;

        .logo {
          display: none;
        }
      }
    }
  }

  .recommend {
    display: flex;
    place-items: center;
    .recommend_content {
      line-height: 36px;
      font-size: 14px;
      border: 1px solid #E9EBED;
      margin: 15px 0;
      padding: 0 15px;
      border-radius: 5px;
      width: 95%;
      &.currentWords{
            border-color #459BEA
            color #459BEA
      }
    }

    .logo {
      width: 15px;
      height: 15px;
      background: #459BEA;
      color: white;
      text-align: center;
      line-height: 15px;
      border-radius: 50%;
      margin-left: 10px;
    }
  }
  .empty{
    display flex
    justify-content center
    align-items center
    height 100%
    .imgWrap{
      display flex
      align-items center
      span{
        margin 10px 0 0 10PX;
        color #B3B3B3;
      }
    }
  }
}
</style>